<template>
  <label
      class="checkbox-container"
      :class="[
      sizeClass,
      { 'is-disabled': disabled }
    ]"
      :style="checkedColor"
  >
    <input
        ref="input"
        type="checkbox"
        class="checkbox-input"
        :checked="isChecked"
        :disabled="disabled"
        :value="value"
        @change="handleChange"
        @click="$emit('click', $event)"
        v-bind="ariaAttributes"
    >
    <span class="checkbox-inner"></span>

    <!-- 标签内容 -->
    <span v-if="$slots.default" class="checkbox-label">
      <slot />
    </span>
    <span v-else-if="label" class="checkbox-label">
      {{ label }}
    </span>
  </label>
</template>

<script setup>
import { computed, ref, watchEffect } from 'vue'

const props = defineProps({
  modelValue: { type: [Boolean, Array], default: false },
  disabled: Boolean,
  value: { default: null },
  label: String,
  size: { type: String, default: 'medium' },
  color: String,
  indeterminate: Boolean
})

const emit = defineEmits([
  'update:modelValue',
  'change',
  'click'
])

const input = ref(null)
const sizeClass = computed(() => `size-${props.size}`)

// 处理选中状态
const isChecked = computed(() => {
  if (Array.isArray(props.modelValue)) {
    return props.modelValue.includes(props.value)
  }
  return props.modelValue
})

// 处理颜色样式
const checkedColor = computed(() => {
  if (isChecked.value && props.color) {
    return { '--checked-color': props.color }
  }
  return null
})

// 无障碍属性
const ariaAttributes = computed(() => ({
  'role': 'checkbox',
  'aria-checked': isChecked.value ? 'true' : 'false',
  'aria-disabled': props.disabled ? 'true' : 'false'
}))

const handleChange = (e) => {
  if (props.disabled) return

  let newValue
  if (Array.isArray(props.modelValue)) {
    newValue = [...props.modelValue]
    const index = newValue.indexOf(props.value)
    index === -1 ? newValue.push(props.value) : newValue.splice(index, 1)
  } else {
    newValue = e.target.checked
  }

  emit('update:modelValue', newValue)
  emit('change', newValue)
}

// 处理半选状态
watchEffect(() => {
  if (input.value) {
    input.value.indeterminate = props.indeterminate
  }
})
</script>

<style scoped>
.checkbox-container {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
}

.checkbox-inner {
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
}

.checkbox-inner::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.checkbox-input:checked + .checkbox-inner {
  background-color: var(--checked-color, #2196F3);
  border-color: var(--checked-color, #2196F3);
}

.checkbox-input:checked + .checkbox-inner::after {
  opacity: 1;
}

/* 大小控制 */
.size-small .checkbox-inner { width: 14px; height: 14px; }
.size-medium .checkbox-inner { width: 16px; height: 16px; }
.size-large .checkbox-inner { width: 18px; height: 18px; }

/* 禁用状态 */
.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox-label {
  user-select: none;
}
</style>